import { StyleSheet } from 'react-native';
import { phonePx, px } from '../../../../util/adapt';
import { APP_YELLOW, APP_BLACK, APP_RED } from '../../../../constant/color';
import { NOTCH_WIDTH } from '../../../../constant';

export default StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    backgroundColor: APP_YELLOW,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 1
  },
  emptyContainer: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    backgroundColor: APP_YELLOW,
    alignItems: 'center',
    justifyContent: 'center'
  },
  title: {
    fontSize: phonePx(24),
    color: APP_BLACK,
    fontWeight: '600',
    lineHeight: phonePx(29)
  },
  content: {
    marginTop: phonePx(24),
    height: phonePx(172)
  },
  loadStudents: {
  },
  students: {
    paddingHorizontal: phonePx(50),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  student: {
    width: phonePx(108),
    height: phonePx(172),
    borderRadius: phonePx(9),
    backgroundColor: '#fff',
    alignItems: 'center',
    marginHorizontal: phonePx(12)
  },
  avatar: {
    width: phonePx(84),
    height: phonePx(84),
    marginTop: phonePx(12)
  },
  studentInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: phonePx(16)
  },
  name: {
    fontSize: phonePx(14),
    color: APP_BLACK,
    fontWeight: '500',
    lineHeight: phonePx(20),
    marginTop: phonePx(8),
    width: phonePx(90),
    alignItems: 'center'
  },
  coinIcon: {
    width: phonePx(20),
    height: phonePx(20)
  },
  addCoin: {
    marginLeft: phonePx(4),
    fontSize: phonePx(18),
    color: APP_BLACK,
    fontWeight: '500'
  },
  back: {
    position: 'absolute',
    top: phonePx(10),
    left: phonePx(15) + NOTCH_WIDTH,
    width: phonePx(25),
    height: phonePx(25),
    alignItems: 'center',
    justifyContent: 'center'
  },
  backIcon: {
    width: phonePx(25),
    height: phonePx(25)
  },
  loadMyCoin: {
    height: phonePx(40),
    backgroundColor: '#FFFFFF',
    borderRadius: phonePx(20),
    position: 'absolute',
    top: phonePx(16),
    right: phonePx(16),
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: phonePx(13)
  },
  myCoinIcon: {
    width: phonePx(18),
    height: phonePx(18)
  },
  myCoin: {
    fontSize: phonePx(14),
    color: APP_BLACK,
    fontWeight: '500',
    marginLeft: phonePx(8)
  },
  myAddCoin: {
    fontSize: phonePx(14),
    color: APP_RED,
    fontWeight: '500',
    marginLeft: phonePx(4)
  },
  icon: {
    width: px(237),
    height: px(134)
  },
  desc: {
    marginTop: px(20),
    fontSize: px(34),
    lineHeight: px(48),
    fontWeight: '600',
    color: APP_BLACK
  },
  reload: {
    marginTop: px(50),
    width: px(160),
    height: px(62),
    borderRadius: px(31),
    borderWidth: px(2),
    borderColor: APP_BLACK,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: APP_YELLOW
  },
  backDesc: {
    fontSize: px(24),
    fontWeight: '600',
    color: APP_BLACK
  }
});
